<template>
  <!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'  -->
  <a-layout-header
    v-if="!headerBarFixed"
    :class="[
      fixedHeader && 'ant-header-fixedHeader',
      sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed',
    ]"
    :style="{ padding: '0' }"
  >
    <div v-if="mode === 'sidemenu'" class="header" :class="theme">
      <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle" />
      <user-menu :theme="theme" />
    </div>
    <!-- 顶部导航栏模式 -->
    <div v-else :class="['top-nav-header-index', theme]">
      <div class="header-index-wide flex align-center">
        <div class="left-content">餐饮油烟在线监测管理平台</div>
        <div class="left-img">
          <img src="@/assets/imgs/menu/top-img.png" alt="" />
        </div>
        <div class="menu-wrap" style="width: calc(100% - 8.2rem)">
          <s-menu
            mode="horizontal"
            :menu="menus"
            :theme="theme"
            @updateMenuTitle="handleUpdateMenuTitle"
            class="f1 flex justify-around"
          ></s-menu>
        </div>
        <div class="right-img">
          <img src="@/assets/imgs/menu/top-img2.png" alt="" />
        </div>

        <div class="header-right f1 flex justify-around">
          <div class="img-wrap line-hidden">
            <img src="@/assets/imgs/menu/user.png" alt="" />
            你好，{{ userMessage.realname }}
          </div>
          <div class="img-wrap cursor line-hidden" @click="handleLogout">
            <img src="@/assets/imgs/menu/exit.png" alt="" style="margin-right: 8px" />
            退出登录
          </div>
        </div>
      </div>
    </div>
  </a-layout-header>
</template>

<script>
import SMenu from '../menu/'
import Logo from '../tools/Logo'
import { findEnableDictItemsbyCode } from '@/api/api'
import { mixin } from '@/utils/mixin.js'
import { mapActions } from 'vuex'
import moment from 'moment'
export default {
  name: 'GlobalHeader',
  components: {
    SMenu,
    Logo,
  },
  mixins: [mixin],
  props: {
    mode: {
      type: String,
      default: 'sidemenu',
    },
    menus: {
      type: Array,
      required: true,
    },
    theme: {
      type: String,
      required: false,
      default: 'dark',
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false,
    },
    device: {
      type: String,
      required: false,
      default: 'desktop',
    },
  },
  data() {
    return {
      headerBarFixed: false,
      topMenuStyle: {
        headerIndexLeft: {},
        topSmenuStyle: {},
      },
      userMessage: {},
      imgPrefix: '',
    }
  },
  watch: {
    $route(newValue, oldValue) {
      if (newValue.path == '/dashboard/analysis') {
        if (this.websock1) {
          this.websock1.close()
        }
      } else {
        // this.initWebSocket()
      }
    },
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    this.userMessage = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value

    findEnableDictItemsbyCode({ code: 'static_server' }).then((res) => {
      this.imgPrefix = res.result[0].value
    })
  },
  methods: {
    moment,
    ...mapActions(['Logout']),
    handleScroll() {
      if (this.autoHideHeader) {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if (scrollTop > 100) {
          this.headerBarFixed = true
        } else {
          this.headerBarFixed = false
        }
      } else {
        this.headerBarFixed = false
      }
    },
    toggle() {
      this.$emit('toggle')
    },
    handleLogout() {
      const that = this
      this.$confirm({
        title: '提示',
        content: '确定要退出登录吗 ?',
        onOk() {
          return that
            .Logout({})
            .then(() => {
              that.$router.push({ path: '/user/login' })
              window.location.reload()
            })
            .catch((err) => {
              that.$message.error({
                title: '错误',
                description: err.message,
              })
            })
        },
        onCancel() {},
      })
    },
    handleUpdateMenuTitle(value) {
      this.$emit('updateMenuTitle', value)
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .ant-menu-horizontal > .ant-menu-item {
  border-bottom: none;
}

/deep/ .ant-menu-horizontal > .ant-menu-item:hover,
/deep/ .ant-menu-horizontal > .ant-menu-submenu:hover,
/deep/ .ant-menu-horizontal > .ant-menu-submenu-selected {
  border-bottom: none;
  // color: #0ae0fd;
}
</style>

<style lang="less">
@height: 0.56rem;
.cursor {
  cursor: pointer;
}

.ant-layout-header {
  // height: 80px !important;
  background: #003a39 !important;
}

// ! sider-menu-mode

// .header {
//   z-index: 2;
//   color: white;
//   height: @height;
//   background-color: @primary-color;
//   transition: background 300ms;
//   padding: 0 12px 0 0;
//   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
//   position: relative;
//   .trigger {
//     font-size: 22px;
//     line-height: 42px;
//     padding: 0 18px;
//     cursor: pointer;
//     transition: color 300ms, background 300ms;
//     &:hover {
//       background: rgba(255, 255, 255, 0.3);
//     }
//   }
// }

// ! top-menu-mode
.top-nav-header-index {
  height: 60px;
  // padding: 0.1rem;
  background: url('~@/assets/imgs/menu/top-bg.png') no-repeat;
  background-size: 100% 100%;

  .header-index-wide {
    height: 60px;
    line-height: 60px;
    color: #00f0f7;
    background: transparent;

    .left-content {
      padding-left: 24px;
      font-size: 24px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #00f8ff;
    }
  }
  .left-img {
    margin-left: 50px;
  }

  .header-right {
    padding-left: 30px;
  }

  .ant-menu {
    height: 100%;
    border: none;
    background: transparent;
    .ant-menu-item {
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      a {
        position: relative;
        top: 0;
        left: 0;
        font-size: 16px;
        font-weight: bold;
        font-family: PingFang SC;
        color: #00d9df;
        height: 100%;
        line-height: 40px;
        padding: 0 20px;
        background: url('~@/assets/imgs/menu/menu-icon.png') no-repeat;
        background-size: 100% 100%;
      }
      a:hover {
        color: #004545;
      }
    }
    .ant-menu-item-selected,
    .ant-menu-item-active {
      border: none;
      a {
        font-size: 16px;
        font-weight: bold;
        color: #004545;
        background: url('~@/assets/imgs/menu/menu-active.png') no-repeat;
        background-size: 100% 100%;
      }
    }

    .ant-menu-submenu {
      border: none;
      padding-right: 10px;
      .ant-menu-submenu-title {
        color: #00d9df;
        font-size: 16px;
        font-weight: bold;
        font-family: PingFang SC;
        background: url('~@/assets/imgs/menu/menu-icon.png') no-repeat;
        background-size: 100% 100%;
        height: 40px;
        line-height: 40px;
      }
    }
    .ant-menu-submenu-title:hover .ant-menu-submenu-title,
    .ant-menu-submenu-active .ant-menu-submenu-title,
    .ant-menu-submenu-selected .ant-menu-submenu-title {
      border: none;
      background: url('~@/assets/imgs/menu/menu-active.png') no-repeat;
      background-size: 100% 100%;
      font-size: 16px;
      font-weight: bold;
      color: #004545;
    }
  }
}

// ! part2
</style>
